import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:signage/l10n/l10n.dart';
import 'package:signage/widgets/custom_appbar.dart';
import '../controllers/cast_progress_controller.dart';

class CastProgressView extends GetView<CastProgressController> {
  const CastProgressView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(243, 244, 246, 1),
      appBar: CustomAppBar(
        backgroundColor: Colors.white,
        title: controller.isClear
            ? AppLocalizations.of(Get.context!)!.translate('device_clear_screen')
            : AppLocalizations.of(Get.context!)!.translate('cast'),
      ),
      body: Obx(() => Container(
            margin: const EdgeInsets.all(14),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(16)),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                16.verticalSpace,
                Text(
                  '${AppLocalizations.of(Get.context!)!.translate('cast_device')}（${controller.deviceProgress.length}）',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w400,
                    letterSpacing: 0,
                    color: Color.fromRGBO(51, 51, 51, 1),
                  ),
                ).paddingOnly(left: 16),
                Expanded(
                    child: ListView.builder(
                  itemCount: controller.deviceProgress.length,
                  itemBuilder: (context, index) {
                    final device = controller.deviceProgress[index];
                    return Card(
                      color: const Color.fromRGBO(248, 248, 248, 1),
                      margin: const EdgeInsets.symmetric(
                          horizontal: 16, vertical: 8),
                      child: Padding(
                        padding: const EdgeInsets.all(16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              device.deviceCachedInfo.name,
                              style: Theme.of(context).textTheme.titleMedium,
                            ),
                            const SizedBox(height: 8),
                            Obx(() => LinearProgressIndicator(
                                  value: device.progress.value,
                                  backgroundColor: Colors.grey[200],
                                  valueColor: AlwaysStoppedAnimation<Color>(
                                      const Color.fromRGBO(252, 207, 1, 1)),
                                )),
                            const SizedBox(height: 8),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(
                                  child: Obx(() => Text(
                                        device.status.value,
                                        softWrap: true,
                                      )),
                                ),
                                const SizedBox(width: 8),
                                Obx(() => Text(
                                    '${(device.progress.value * 100).toStringAsFixed(1)}%')),
                              ],
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ))
              ],
            ),
          )),
    );
  }
}
